<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <script src="static/js/jquery-3.5.1.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
</head>
<body>

<!--lg pc大屏
    md pc小屏
    sm 平板屏幕
    xs 手机

    如果没有设置当前屏幕尺寸，样式，默认一个元素占一行
    如果设置了屏幕尺寸，比这个尺寸大的屏幕继承了当前的设置
                    比这个尺寸小的屏幕默认一个元素占一行
-->
<div class="container">
    <div class="row">
        <div class="col-xs-4" style="border: 1px solid blue">11111</div>
        <div class="col-xs-4" style="border: 1px solid red">22222</div>
        <div class="col-xs-4" style="border: 1px solid blue">33333</div>
    </div>
</div>

</body>
</html>